<template>
    <div class="content">
        <div class="coins-filter">
            <h3>{{newTraderData.coinCore}}／{{newTraderData.convertCoinCore}}</h3>
            <div class="coins-select" @click.stop.prevent="showBool=!showBool">
                <div class="coins-select-item buy" v-if="defaultType==1">
                    <i class="icon"></i>
                    <span>{{'BUY_IN'|t}}</span>
                </div>
                <div class="coins-select-item sell" v-if="defaultType==2">
                    <i class="icon"></i>
                    <span>{{'SELL_OUT'|t}}</span>
                </div>
                <div class="filter-select-position" v-show="showBool">
                    <div class="coins-select-item buy" @click="defaultType=1">
                        <i class="icon"></i>
                        <span>{{'BUY_IN'|t}}</span>
                    </div>
                    <div class="coins-select-item sell" @click="defaultType=2">
                        <i class="icon"></i>
                        <span>{{'SELL_OUT'|t}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="coins-detail">
            <div class="coins-form" v-if="defaultType==1">
                <h3 class="form-title">{{'LIMIT_LIST'|t}}</h3>
                <div class="form-input">
                    <input type="number" v-model="buyPrice" class="input" :placeholder="$t('BUY_PLACE')" @keyup="changeBuyNum">
                    <span class="input-text">({{newTraderData.convertCoinCore}})</span>
                </div>
                <p class="form-text">≈{{newTraderData.cnyPrice*buyPrice|Fixed}} CNY</p>
                <div class="form-input">
                    <input type="number" v-model="buyNum" class="input" :placeholder="$t('AMOUNT')+'('+newTraderData.coinCore+')'" @keyup="changeBuyNum">
                </div>
                <div class="form-input">
                    <input type="text" v-model="buyTotal" class="input" :placeholder="$t('TRANSACTION_ACCOUNT')+'('+newTraderData.convertCoinCore+')'"
                        disabled>
                </div>
                <div class="form-input">
                    <input type="password" v-model="buyPass" class="input" :placeholder="$t('USER_TRADE_PASS_PLACE')">
                </div>
                <div class="form-enable">
                    <span>{{'AVALIABLE'|t}}</span>
                    <p>{{ableBuy.enable}}{{ableBuy.coinCore}}</p>
                    <!-- <span>{{newTraderData.dealPrice|Fixed(4)}}</span>≈ {{newTraderData.dealPrice*newTraderData.cnyPrice|Fixed(4)}}CNY</p> -->
                    <!-- <span class="enable-text">--</span> -->
                </div>
                <div class="form-submit">
                    <a href="javascript:;" class="form-input-submit buy" @click="submitForm('buy','buyPrice','buyNum','buyPass')">{{'BUY_IN'|t}}</a>
                </div>
            </div>
            <div class="coins-form" v-if="defaultType==2">
                <h3 class="form-title">{{'LIMIT_LIST'|t}}</h3>
                <div class="form-input">
                    <input type="text" v-model="sellPrice" class="input" :placeholder="$t('SELL_OUT_PLACE')">
                    <span class="input-text">{{newTraderData.convertCoinCore}}</span>
                </div>
                <p class="form-text">≈{{newTraderData.cnyPrice*sellPrice|Fixed}} CNY</p>
                <div class="form-input">
                    <input type="text" v-model="sellNum" class="input" :placeholder="$t('AMOUNT')+'('+newTraderData.coinCore+')'" @keyup="changeSellNum()">
                </div>
                <div class="form-input">
                    <input type="text" v-model="sellTotal" class="input" :placeholder="$t('TRANSACTION_ACCOUNT')+'('+newTraderData.convertCoinCore+')'"
                        disabled>
                </div>
                <div class="form-input">
                    <input type="password" v-model="sellPass" class="input" :placeholder="$t('USER_TRADE_PASS_PLACE')">
                </div>
                <div class="form-enable">
                    <span>{{'AVALIABLE'|t}}</span>
                    <!-- <span class="enable-text">--</span> -->
                    <p>{{ableSell.enable}}{{ableSell.coinCore}}</p>
                    <!-- <span>{{newTraderData.dealPrice|Fixed(4)}}</span>≈ {{newTraderData.dealPrice*newTraderData.cnyPrice|Fixed(4)}}CNY</p> -->
                </div>
                <div class="form-submit">
                    <a href="javascript:;" class="form-input-submit sell" @click="submitForm('sell','sellPrice','sellNum','sellPass')">{{'SELL_OUT'|t}}</a>
                </div>
            </div>
            <div class="coins-detail-list">
                <!-- 买 -->
                <div class="detail-list max12">
                    <div class="detail-item title">
                        <span>{{'ADVERT_PRICE'|t}}({{newTraderData.coinCore}})</span>
                        <span>{{'AMOUNT'|t}}(TRX)</span>
                    </div>
                    <div class="detail-item" v-for="(item,key) of buyData" :key='key'>
                        <span class="c-red">{{item.entrustPrice | fixed}}</span>
                        <span>{{item.dealNum}}</span>
                    </div>
                </div>
                <div class="detial-price">
                    {{newPrice}}{{newTraderData.convertCoinCore}} ≈ {{cnyPrice| fixed}}CNY
                </div>
                <!-- 卖 -->
                <div class="detail-list max12">
                    <div class="detail-item title">
                        <span>{{'ADVERT_PRICE'|t}}({{newTraderData.coinCore}})</span>
                        <span>{{'AMOUNT'|t}}(TRX)</span>
                    </div>
                    <div class="detail-item" v-for="(item,key) of sellData" :key='key'>
                        <span class="c-success">{{item.entrustPrice | fixed}}</span>
                        <span>{{item.dealNum}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="coins-detail column mt-20">
            <h3 class="last-deal">{{'LAST_DEAL'|t}}</h3>
            <div class="coins-detail-list">
                <div class="detail-list">
                    <div class="detail-item title">
                        <span>{{'DEAL_TIME'|t}}</span>
                        <span>{{'DEAL_PRICE'|t}}</span>
                        <span class="text-r">{{'DEAL_AMOUNT'|t}}</span>
                    </div>
                    <div class="detail-item" v-for="(item,key) of recordList" :key='key'>
                        <span>{{item.date}}</span>
                        <span class="c-red" v-if="item.dealType==1">{{item.dealPrice}}</span>
                        <span class="c-success" v-else>{{item.dealPrice}}</span>
                        <span class="text-r">{{item.dealNum}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script> 
    import { Form, Func, Auth } from '@/providers';
    import { Coins, Asset } from '@/services';
    export default {
        data() {
            return {
                showBool: false,
                values: '',
                buyPrice: '',
                buyNum: '',
                buyPass: '',
                buyTotal: '',
                sellPrice: '',
                sellNum: '',
                sellTotal: '',
                sellPass: '',
                defaultType: 1,
                coinNo: '',
                tranCoinNo: '',
                buyData: [],
                sellData: [],
                newPrice: '',
                cnyPrice: '',
                newTraderData: {},
                ableBuy: {},
                ableSell: {},
                recordList: []
            };
        },
        methods: {
            // 表单提交
            async submitForm(type, price, numbers, pass) {
                if (!Auth.getItem('token')) {
                    Form.Totas(this.$t('NOTLOGIN'));
                    return false;
                }
                if (this[price] == null || !this[price]) {
                    Form.Totas(this.$t('NOTPRICE'));
                    return false;
                }
                if (this[numbers] == null || !this[numbers]) {
                    Form.Totas(this.$t('NOTAMOUNT'));
                    return false;
                }
                if (!this[pass]) {
                    Form.Totas(this.$t('ENTERPASSWORD'));
                    return false;
                }
                try {
                    let res = await Coins.CoinTrade({
                        userNo: Auth.getItem('userId'),
                        token: Auth.getItem('token'),
                        coinNo: this.coinNo,
                        convertNo: this.tranCoinNo,
                        tradeType: type,
                        tradePrice: this[price],
                        tradeNum: this[numbers],
                        dealPwd: Func.PasswordEncrypt(this[pass])
                        // timeStamp: +new Date()
                    });
                    if (!Form.checkResToken(res)) return false;
                    Form.Totas(res.desc, () => {
                        this[price] = 0;
                        this[numbers] = 0;
                        this[pass] = '';
                        this.getData();
                    });
                } catch (error) {
                    console.log(error);
                }
            },
            getData() {
                this.GetTradeStatus();
                this.GetBalanByUserNo();
                this.GetCoinEntrustPattern();
                this.GetCoinTradeDetail();
            },
            // 获取用户资产
            async GetBalanByUserNo() {
                try {
                    let res = await Asset.GetBalanByUserNo({
                        userNo: Auth.getItem('userId'),
                        token: Auth.getItem('token'),
                        hide: 0,
                        coinNo: this.coinNo,
                        convertNo: this.tranCoinNo
                    });
                    res.data.forEach((item, key) => {
                        if (item.coinType == this.coinNo) {
                            this.ableSell = item;
                        }
                        if (item.coinType == this.tranCoinNo) {
                            this.ableBuy = item;
                        }
                    });
                } catch (error) {
                    console.log(error);
                }
            },
            // 获取最新成交记录
            async GetCoinTradeDetail() {
                try {
                    let res = await Coins.GetCoinTradeDetail({
                        coinNo: this.coinNo,
                        convertNo: this.tranCoinNo,
                        pageSize: '1',
                        lineSize: '20',
                        dealType: ''
                    });
                    this.recordList = res.data;
                } catch (error) {
                    console.log(error);
                }
            },
            // 获取平台买卖模式
            async GetCoinEntrustPattern() {
                try {
                    let res = await Coins.GetCoinEntrustPattern({
                        entrustNo: this.coinNo,
                        convertNo: this.tranCoinNo,
                        pageSize: 0,
                        lineSize: 0,
                        userNo: Auth.getItem('userId') ? Auth.getItem('userId') : 0
                    });
                    this.newPrice = res.data.newPrice;
                    this.cnyPrice = res.data.cnyPrice;
                    this.sellData = res.data.sellEntrust;
                    this.buyData = res.data.buyEntrust;
                } catch (error) {
                    console.log(error);
                }
            },
            // 设置限价买入【总买入量】
            changeBuyNum() {
                this.buyTotal = (this.buyPrice * this.buyNum).toFixed(7);
            },
            // 设置限价买入【预计交易额】
            changeSellNum() {
                console.log(this.sellNum);
                this.sellTotal = Number(this.sellNum).toFixed(7);
            },
            // 获取最新行情
            async GetTradeStatus() {
                try {
                    let res = await Coins.GetTradeStatus({
                        coinNo: this.coinNo,
                        convertNo: this.tranCoinNo
                    });
                    this.newTraderData = res.data;
                    this.buyPrice = res.data.dealPrice;
                    this.sellPrice = res.data.dealPrice;
                } catch (error) {
                    console.log(error);
                }
            }
        },
        created() {
            this.coinNo = this.$route.query.coinNo;
            this.tranCoinNo = this.$route.query.tranCoinNo;
            this.getData();
        }
    };
</script>

<style scoped lang="scss">
    @import "../../assets/sass/coins.scss";
</style>